<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>购物车 - 简易商城</title>
    <link rel="stylesheet" href="../css/css/style.css">
    <style>
        body { background: #f5f5f5; }
        .cart-container { max-width: 700px; margin: 40px auto; background: #fff; border-radius: 8px; box-shadow: 0 2px 8px #eee; padding: 30px 40px; }
        .cart-title { font-size: 28px; margin-bottom: 20px; }
        .cart-item { display: flex; align-items: center; border-bottom: 1px solid #eee; padding: 15px 0; }
        .cart-item img { width: 60px; height: 60px; margin-right: 20px; border-radius: 6px; background: #fafafa; }
        .cart-item span { flex: 1; }
        .cart-item button { background: #e4393c; color: #fff; border: none; border-radius: 4px; padding: 4px 10px; cursor: pointer; }
        .cart-item button:hover { background: #b7271e; }
        .cart-total { text-align: right; font-size: 18px; color: #e4393c; margin-top: 20px; }
        .checkout-link { display: inline-block; margin-top: 20px; background: #e4393c; color: #fff; padding: 8px 20px; border-radius: 4px; text-decoration: none; }
        .checkout-link:hover { background: #b7271e; }
    </style>
</head>
<body>
    <div class="cart-container">
        <div class="cart-title">购物车</div>
        <div id="cartList"></div>
        <a href="checkout.html" class="checkout-link">去结算</a>
    </div>
    <script src="../js/utils.js"></script>
    <script src="../js/cart.js"></script>
</body>
</html>